<template>
	<view class="login-container">

		<!-- 红娘信息展示 -->
		<view class="matchmaker-container" v-if="matchmakerInfo.nickname">
			<text class="matchmaker-title">您的专属红娘</text>
			<view class="matchmaker-info">
				<image :src="matchmakerInfo.avatar" class="matchmaker-avatar"></image>
				<text class="matchmaker-name">{{matchmakerInfo.nickname}}</text>
			</view>
		</view>
		<!-- Logo -->
		<view class="logo-container">
			<image src="/h5/pagesA/static/img/logo.png" mode="aspectFit"></image>
		</view>

		<!-- 微信登录按钮 -->
		<view class="wechat-login-btn" @click="wechatLogin">
			<image src="/pagesA/static/img/icon/weixin.png" class="wechat-icon"></image>
			<text>微信登录</text>
		</view>
	</view>
</template>

<script>
import { BASE_URL } from '@/util/api';
export default {
	data() {
		return {
			appId: 'wxac6a5a009f8ad0f5', // 替换为你的服务号AppID
			redirectUri: encodeURIComponent(BASE_URL + '/index/auth/callback'), // 如：https://yourdomain.com/auth/callback
			state: 'STATE', // 自定义参数，防止CSRF攻击
			referrer_id: 0,
			matchmakerInfo: {
				avatar: '',
				nickname: ''
			}
		}
	},
	
	onLoad(option) {
		if(option.referrer_id) {
			this.referrer_id = option.referrer_id;
			this.loadOtherUser();
		}
	},
	methods: {
		wechatLogin() {
			// 构造微信授权URL
			const callbackUrl = BASE_URL + "h5/pagesA/login/callback?referrer_id=" + this.referrer_id;
			// 必须对回调URL进行编码
			const encodedCallbackUrl = encodeURIComponent(callbackUrl);
			const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appId}&redirect_uri=${encodedCallbackUrl}&response_type=code&scope=snsapi_userinfo&state=${this.state}#wechat_redirect`;

			// 在微信内置浏览器中直接跳转
			window.location.href = authUrl;
		},
		
		async loadOtherUser() {
			try {
				const res = await this.$myRuquest({
					url: '/index/dsnv.activities/myinfo2',
					method: 'POST',
					data: { id: this.referrer_id }
				});

				if (res.data.code === 200) {
					this.matchmakerInfo = {
						avatar: res.data.data.avatar,
						nickname: res.data.data.nickname
					};
				}
			} catch (error) {
				console.error('获取红娘信息失败:', error);
			}
		},
	}
}
</script>

<style>
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 80vh;
	padding: 0 30px;
}

.logo-container {
	margin-bottom: 50px;
}

.logo-container image {
	width: 150px;
	height: 150px;
}

.wechat-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80%;
	height: 45px;
	background-color: #07C160;
	color: #fff;
	border-radius: 5px;
	font-size: 16px;
}

.wechat-icon {
	width: 25px;
	height: 25px;
	margin-right: 10px;
}

/* 红娘信息样式 */
.matchmaker-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30px;
}

.matchmaker-title {
	font-size: 14px;
	color: #999;
	margin-bottom: 10px;
}

.matchmaker-info {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.matchmaker-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-bottom: 5px;
}

.matchmaker-name {
	font-size: 16px;
	color: #333;
}
</style>